import React, { Suspense } from 'react'
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
import routerConfig from '../router/RouterConfig'
import { RootItem, Rootrouter } from '../utils/type'
type Props = {}

const Index = (props: Props) => {
    const renderDom = (arr: Rootrouter) => {
        return arr.map((item: RootItem, index: number) => {
            return <Route
                key={index}
                path={item.path}
                element={item.redirect ? <Navigate to={item.redirect} /> : <item.element></item.element>}
            >
                {item.children && renderDom(item.children)}
            </Route>
        })
    }
    return (
        <Suspense fallback={<div>加载中</div>}>
            <BrowserRouter>
                <Routes>
                    {renderDom(routerConfig)}
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default Index